<template>
  <div class="trade-order-detail">
    <el-form label-position="left" label-width="100px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <i class="avatar iconfont icon-dingdan" />
          <span class="text">通用</span>
        </div>
        <el-form ref="infoForm" :model="orderDetail" label-width="100px">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="创建用户">
                <span>{{type === 'add' ? this.$store.state.user.username : orderDetail.user.username}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发票号">
                <el-input v-model="orderDetail.receiptNumber" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="销售合同号">
                <el-input v-model="orderDetail.saleNumber" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <i class="avatar iconfont icon-dingdan" />
          <span class="text">船期进度</span>
        </div>
        <el-form ref="infoForm" :model="orderDetail" label-width="100px">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="船务员">
                <el-input v-model="orderDetail.shipman" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="装柜日期">
                <el-date-picker v-model="orderDetail.loadingAt" type="date" placeholder="选择日期时间"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户专员">
                <el-input v-model="orderDetail.customerService" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="CY">
                <el-input v-model="orderDetail.CY" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="驳船ETD">
                <el-input v-model="orderDetail.bargeEtd" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="大船ETD">
                <el-date-picker v-model="orderDetail.shipEtd" type="date" placeholder="选择日期时间"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="ETA">
                <el-input v-model="orderDetail.ETA" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订舱号">
                <el-input v-model="orderDetail.bookingNumber" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报关放行进度">
                <el-input v-model="orderDetail.customClearanceAt" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单证进度">
                <el-input v-model="orderDetail.documentAt" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数量">
                <el-input v-model="orderDetail.number" placeholder="LCL请填写LCL" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="柜型">
                <el-input v-model="orderDetail.cabinetType" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="装船港">
                <el-input v-model="orderDetail.shipPort" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="船公司">
                <el-input v-model="orderDetail.shipCompany" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="柜号">
                <el-input v-model="orderDetail.cabinetNumber" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="封条号">
                <el-input v-model="orderDetail.sealNumber" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车牌">
                <el-input v-model="orderDetail.licensePlate" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="司机电话">
                <el-input v-model="orderDetail.driverMobile" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="本地货代">
                <el-input v-model="orderDetail.localFreightForward" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="船期进度备注">
                <el-input v-model="orderDetail.scheduleRemark" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="月份">
            <el-select v-model="orderDetail.month" placeholder="请选择">
              <el-option
                v-for="item in [1,2,3,4,5,6,7,8,9,10,11,12]"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="海运费">
            <el-input v-model="orderDetail.seaFee" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="拖车费">
            <el-input v-model="orderDetail.trailerFee" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报关费">
            <el-input v-model="orderDetail.customClearanceFee" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="打单费">
            <el-input v-model="orderDetail.billingFee" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="异提费/改单费">
            <el-input v-model="orderDetail.changeOrderFee" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="约柜费">
            <el-input v-model="orderDetail.arkFee" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="扫描费">
            <el-input v-model="orderDetail.scanFee" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入仓费">
            <el-input v-model="orderDetail.arivalFee" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="退点">
            <el-input v-model="orderDetail.retreat" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="高速费">
            <el-input v-model="orderDetail.overheadFee" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="其他费用">
            <el-input v-model="orderDetail.otherFee" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="费用合计">
            <el-input v-model="orderDetail.totalFee" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产地证类型">
            <el-input v-model="orderDetail.originCertificateType" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产地证费用">
            <el-input v-model="orderDetail.originCertificateFee" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收到DN时间">
            <el-date-picker v-model="orderDetail.receiveDnAt" type="date" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="港杂费">
            <el-date-picker v-model="orderDetail.shipPortFee" type="date" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="私户/公户/港币/美金">
            <el-input v-model="orderDetail.money" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="外地货代">
            <el-input v-model="orderDetail.foreignFreightForward" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="外地港杂付款">
            <el-date-picker v-model="orderDetail.shipPortAt" type="date" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="付款水单">
            <el-date-picker v-model="orderDetail.payAt" type="date" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="提单开船日">
            <el-date-picker v-model="orderDetail.boatDay" type="date" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收到提单时间">
            <el-date-picker v-model="orderDetail.ladingAt" type="date" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="正本/电放/EXW/拼柜">
            <el-input v-model="orderDetail.Cabinet" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="提单快递单号">
            <el-input v-model="orderDetail.receiveDeliveryNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收单进度备注">
            <el-input v-model="orderDetail.receiptRemark" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收单快递费用">
            <el-input v-model="orderDetail.deliveryFee" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="寄单/电放时间">
            <el-input v-model="orderDetail.billingAt" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="议付时间">
            <el-input v-model="orderDetail.uploadAt" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="寄单单号">
            <el-input v-model="orderDetail.deliveryNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="寄单费用">
            <el-input v-model="orderDetail.deliveryFee" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="付款方式">
            <el-input v-model="orderDetail.payType" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发票金额">
            <el-input v-model="orderDetail.invoicePrice" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="信用证号码">
            <el-input v-model="orderDetail.creditNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="信用证付款条款">
            <el-input v-model="orderDetail.creditTerm" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="即期/远期">
            <el-input v-model="orderDetail.term" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="btn-group">
      <el-button type="primary" @click="submit">提 交</el-button>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "trade-order-detail",
  components: {},
  data() {
    return {
      moment: moment,
      orderId: this.$route.params.orderId,
      type: this.$route.params.type,
      orderDetail: {
        user: ""
      }
    };
  },
  computed: {},
  methods: {
    submit() {
      this.$api.tradeforeign
        .upsertOrder({ userId: this.$store.state.user.id, ...this.orderDetail })
        .then(res => {
          // res为true则新增，false则更新
          if (res.data) {
            this.$message.success("新增订单成功");
            this.$router.push({ path: "/tradeforeign/itemmanage" });
          } else {
            this.$message.success("编辑订单信息成功");
            this.getOrderDtail();
          }
        });
    },
    getOrderDtail() {
      this.$api.tradeforeign
        .detailOrder({ orderId: this.orderId })
        .then(res => {
          this.orderDetail = res.data.orderDetail;
        });
    }
  },
  created() {
    if (this.type === "edit") {
      this.getOrderDtail();
    }
  }
};
</script>

<style lang="scss" scoped>
.trade-order-detail {
  .btn-group {
    text-align: center;
    margin-bottom: 30px;
  }
}
</style>